<!-- 活动详情图 -->
<template>
  <div>
      <div class="header">
      </div>
      <div class="join">
          <div class="intro-card">
               
                    <span id="title">介绍</span><br>
                    <span id="content">寻找你身边的美</span>
           
          </div>
         <div class="join-card">
        
             <span id="join-title">距离截稿还有24天 共6622件作品</span><br>
             <span id="join-host">主办方：图虫小秘书</span><br>
                <button type="button" class="mui-btn mui-btn-warning mybutton" width="500px">立即参加</button>
            
         </div>
      </div>
      <div class="photo">
          <span id="phtitle">作品</span><br>
             <div class="row" v-for="(rows,index) in rowLists" :key="index">
        <!-- 每一张图片区域 -->
        <div class="photoInfo" v-for="(img,index) in rows" :key="index">
          <!-- 图片 -->
          <div class="img-box">
            <router-link :to="{name: 'photoInfo'}">
              <el-card shadow="always" :body-style="{ padding: '0px' }">
                <img :src="img.src" style="height:320px;">
                <div id="zhezhao">
                  <img
                    src="@/images/icon.jpg"
                    alt
                    style="width:40px;margin-top:230px;border-radius:50%;"
                  >
                </div>
              </el-card>
            </router-link>
          </div>
          
        </div>
      </div>
       <div class="fenye" style="text-align:center;margin:80px auto;">
        <el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>
      </div>
      </div>
      

  </div>
</template>

<script>
export default {
  data () {
    return {
        imgLists: [
        {
          src: require("../../images/1.png"),
          id: 1
        },
        {
          src: require("../../images/2.png"),
          id: 2
        },
        {
          src: require("../../images/3.png"),
          id: 3
        },
        {
          src: require("../../images/2.png"),
          id: 4
        },
        {
          src: require("../../images/1.png"),
          id: 5
        },
        {
          src: require("../../images/3.png"),
          id: 6
        },
        {
          src: require("../../images/2.png"),
          id: 7
        },
        {
          src: require("../../images/1.png"),
          id: 8
        }
      ],
      rowLists: [],
    };
  },
  mounted: function() {
    this.changeRow();
  
  },

  methods: {
    changeRow() {
      var rowNum = parseInt(Math.ceil(this.imgLists.length / 4));
      var n = 0;
      for (var i = 0; i < rowNum; i++) {
        var rows = [];
        n = i * 4;
        for (var j = n; j < n + 4; j++) {
          rows.push(this.imgLists[j]);
        }
        this.rowLists.push(rows);
      }
      return;
    },
  }
}

</script>
<style lang='scss' scoped>
.header {
    height: 500px;
    background-image: url("../../images/3.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: fixed;
}
.join{
    display: flex;
    justify-content: space-between;
    margin: 50px 50px;
    
    .intro-card{
        width:70%;
        height: 150px;
        border: 1px solid #909399;
    box-shadow: 1px 1px 3px 2px #909399 ;
  
        #title{
            margin-left: 30px;
    text-decoration: underline;
    font-size: 20px;
    font-weight: bold;
    line-height: 50px;
    letter-spacing: 10px;
    color: #606266;
        }
        #content{
            margin-left: 50px;
    line-height: 50px;
    font-size: 16px;
    letter-spacing: 5px;
    color: #909399;
        }
    }
    .join-card{
        width:25%;
        height: 150px;
         border: 1px solid #909399;
    box-shadow: 1px 1px 3px 2px #909399 ;
    border-radius: 2%;
    #join-title{
            margin-left: 20px;
    font-size: 16px;
    font-weight: bold;
    line-height: 50px;
    letter-spacing: 5px;
    color: #606266;
    }
    #join-host{
    margin-left: 20px;
    line-height: 30px;
    font-size: 16px;
    letter-spacing: 5px;
    color: #909399;
    }
    .mybutton{
        margin:20px 20px;
        width:90%;
       
    }
    }
}
.photo{
    margin:50px 50px 100px 50px;
     #phtitle{
 margin-left: 30px;
    font-size: 22px;
    font-weight: bold;
    line-height: 50px;
    letter-spacing: 5px;
    color: #606266;
        }
            .row {
      display: flex;
      justify-content: space-between;
      margin: 50px 10px 0 10px;

      .img-box {
        position: relative;
        overflow: hidden;
        z-index: 0;
        #zhezhao {
          position: absolute;
          z-index: -1;
          top: 0;
          width: 100%;
          height: 320px;
          text-align: center;
          background-color: #fff;
        }
      }
      .img-box:hover {
        #zhezhao {
          z-index: 0;
          background-color: rgba(0, 0, 0, 0.5);
        }
      }
    }
}
</style>